<template>
  <div class="waiting-tab-item rounded-t-lg ml-1 position-relative" :style="style" :title="tab.url">
    <div class="d-flex w-100 align-center overflow-hidden">
      <span class="text-no-wrap overflow-hidden flex-1-1-0 w-0 text-truncate">
        {{ tab.title || tab.url }}
      </span>
      <v-btn
        v-if="shouldShowCloseButton"
        color=""
        density="comfortable"
        :icon="mdiClose"
        size="x-small"
        variant="text"
        @click.stop="emit('remove')"
        @mousedown.stop
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { mdiClose } from '@mdi/js'

const props = defineProps<{
  group: F2.tab.Group
  tab: F2.tab.CreateWithId
  tabWidth: number
}>()

const emit = defineEmits<{
  (e: 'remove'): void
}>()

const style = computed(() => ({
  width: `${props.tabWidth}px`,
  padding: '3px 3px 3px 8px',
  backgroundColor: 'rgb(var(--v-theme-tab-base))',
  color: 'rgb(var(--v-theme-on-tab-base))'
}))

const MIN_WIDTH_FOR_CLOSE = 70
const shouldShowCloseButton = computed(() => props.tabWidth >= MIN_WIDTH_FOR_CLOSE)
</script>

<style scoped>
.waiting-tab-item {
  font-size: 12px;
  font-weight: 400;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
</style>
